<script>

export default {
  name: "AiVideoPannel",
  props: {
    title: {
      type: String,
      default: '',
    },
    /**
     * 是否显示头部
     */
    showHeader: {
      type: Boolean,
      default: true
    },
    /**
     * 是否可以被选中
     */
    canCheck: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否被选中
     */
    isChecked: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 100
    },
    width: {
      type: Number,
      default: 200
    }
  },
  components: {  },
  data(){
    return {

    }
  },
  created() {


  },
  mounted() {

  },
  computed:{


  },
  methods: {


  },
};
</script>

<template>
  <div
      class="base-panel-container"
      :style="{ height: height, width: width, minHeight: '130px' }"
  >
    <div class="base-panel-common-bg"/>
    <div class="base-panel-panel-content">
      <div v-if="showHeader" class="base-panel-top-title">
        <div class="base-panel-text-box">
          <slot name="title">
            <span>{{ title }}</span>
          </slot>
        </div>
        <div>
          <slot name="rightTitle"/>
        </div>
      </div>
      <div class="base-panel-content">
        <template v-if="canCheck">
          <div style="cursor: pointer" :class="{ 'base-panel-checked': isChecked }">
            <slot name="default"/>
          </div>
          <el-image class="video-cls" :src="require('../assets/三江口.png')"></el-image>
        </template>
        <template v-else>
          <slot name="default"/>

        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.base-panel-container {
  z-index: 10;
  top: 100px;
  right: 300px;
  color: white;
  width: 200px;
  .base-panel-panel-content {
    width: 400px;
    position: absolute;
    font-size: 14px;
    table {

    }
  }

}


.video-cls {
  width: 400px;
  height: 200px;
}
</style>